<template>
  <PublicPage :custoNav="true" class="ssp-stream">
    <!-- 自定义头部 -->
    <view class="tabsBox" slot="headNav">
      <u-tabs
          :list="tabList"
          :is-scroll="false"
          :current="tabsCur"
          :bold="false"
          :bar-style="{bottom: '-1px !important;'}"
          bar-height="4"
          active-color="#E44435"
          inactive-color="#969799"
          height="60"
          font-size="28"
          @change="_tabsChange"
      />
    </view>
    <!-- 我的帮卖 -->
    <MyHelpSell ref="helpSellRef" :class="{displayNone:tabsCur===1}" @handleInvite="_drawInvite" />
    <!-- 我的供货 -->
    <MySupplyGroup ref="supplyGroupRef" :class="{displayNone:tabsCur===0}" @returnSharedDataFn="returnSharedDataFn" />
    <!-- 分割线 -->
    <!-- 邀请帮卖弹框 -->
    <SharePopup v-if="dlShare" :share-object="shareObject" @drawPoster="_drawPoster" @close="dlShare=false" />
    <!-- 分割线 -->

    <!-- 分割线 -->
    <!-- 我的帮卖--生成分享卡片背景图片组件 -->
    <InviteToHelpSellShare ref="helpSellDrawRef" @shareSuccess="_drawHSSuccess"/>
    <!-- 分割线 -->

    <!-- 分割线 -->
    <!-- 我的帮卖--生成海报组件 -->
    <HelpSellPosters ref="childHelpSellPosters" @posterShareSuccess="_drawPSSuccess"/>
    <!-- 我的帮卖--海报预览 -->
    <PosterPopup v-if="dlPosterPopup" :posterObj="posterObject" />
    <!-- 分割线 -->
  </PublicPage>
</template>

<script>
import PublicPage from '@/components/publicPage/index.vue'
import MyHelpSell from './myHelpSell.vue'
import MySupplyGroup from './mySupplyGroup'
import InviteToHelpSellShare from "@/components/shareImage/inviteToHelpSellShare.vue"
import SharePopup from './components/sharePopup.vue'
import HelpSellPosters from "@/components/shareImage/helpSellPosters.vue"
import PosterPopup from '@/components/shareModal/posterPopup.vue'
import shareApi from '@/api/share.js'
import Util from '@/api/util.js'
import miniApi from '@/api/mini.js'
import { tabList } from './tabs'
export default {
  name: 'stream',
  components: {
    PublicPage,
    MyHelpSell,
    MySupplyGroup,
    InviteToHelpSellShare,
    HelpSellPosters,
    SharePopup,
    PosterPopup,
  },
  data() {
    return {
      tabList, // 自定义头部中tabs
      tabsCur: 0, // 自定义头部中的tabs激活下标
      shareInfoData: {}, // 我的帮卖--邀请帮卖分享卡片生成背景图片需要的对象
      shareObject: {}, // 分享数据对象
      dlShare: false, // 动态分享、邀请帮卖弹框变量
      posterObject: {}, // 分享海报预览
      dlPosterPopup: false, // 海报预览
      inviteOthersShareData: {}, // 邀请他人成为供货帮卖分享数据
    }
  },
  onLoad() {
    // 隐藏菜单胶囊的分享按钮
    wx.hideShareMenu({
      menus: ["shareAppMessage"]
    })
  },
  // 分享
  onShareAppMessage(res) {
    let index = 0
    const shareData = {
      title: '我发现了一个超好用的视频帮卖小程序！快来一起玩转私域流量！',
      imageUrl: `https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/bgImg/group_poster.png?t=${Date.parse(new Date())}`,
      path: `/pagesB/squeezePage/index?shareType=true&type=${index}&idCode=${this.$store.state.userInfo.idCode}`
    }
    console.log(res,'分享按钮触发地方')
    if (res.target.id == "inviteyj") { // 我的供货邀请开启佣金
      shareData.title = '快来开启推荐奖金，我来帮你推荐帮卖，卖货出单更简单！'
      shareData.imageUrl = `https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/prizePool/InviteToHelpSell.png?t=${Date.parse(new Date())}`
      shareData.path = `/pagesB/referralBonus/index?popup=true&idCode=${this.$store.state.userInfo.idCode}`
    }
    if (res.target.id == "nviteEarn") {
      shareData.title = this.inviteOthersShareData.title
      shareData.imageUrl = this.inviteOthersShareData.imageUrl
      shareData.path = this.inviteOthersShareData.path
    }
    if (res.target.id == 'shareFriends') { // 我的帮卖邀请帮卖
      // 我的帮卖
      shareData.title = this.shareObject.title
      shareData.imageUrl = this.shareObject.url
      if (this.shareInfoData.accountId) {
        shareData.path = `/pagesB/personalCenter/homePage?accountId=${this.shareInfoData.accountId}&shareType=true&applyForHelp=true&idCode=${this.$store.state.userInfo.idCode}`
      } else {
        shareData.path = `/pagesB/personalCenter/homePage?accountId=${this.$store.state.userInfo.accountId}&shareType=true&applyForHelp=true&idCode=${this.$store.state.userInfo.idCode}`
      }
    }
    if (res.target.id =='handleInvite') { // 我的供货邀请帮卖
      // 我的供货
      shareData.title = '你来上货，我来帮卖！'
      shareData.imageUrl = `https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/bgImg/supply_poster.png?t=${Date.parse(new Date())}`
      index = 2
    }
    console.log(JSON.parse(JSON.stringify(shareData)))
    return shareData
  },
  onShow() {
    if (this.isLogin) {
      this.getMyHelpSellAxios()
      this.getMySupplyGroupAxios()
      this.getShareData()
      // 获取红点规则
      miniApi.getMyPageInfo().then(res=>{
        this.$store.commit('SET_MY_PAGEINFO',res.data)
      })
    }
  },
  methods: {
    // 获取我的帮卖接口
    getMyHelpSellAxios() {
      if (this.tabsCur === 0 && this.$refs.helpSellRef) {
        // 首次进入及列表为空时刷新数据
        const hasRefresh = !this.$refs.helpSellRef.list.length
        if (hasRefresh) {
          this.$refs.helpSellRef.getCardData()
          this.$refs.helpSellRef.getList()
        }
      }
    },
    // 获取我的供货接口
    getMySupplyGroupAxios() {
      if (this.tabsCur === 1 && this.$refs.supplyGroupRef) {
        // 首次进入及列表为空时刷新数据
        const hasRefresh = !this.$refs.supplyGroupRef.list.length
        if (hasRefresh) {
          this.$refs.supplyGroupRef.getCardData()
          this.$refs.supplyGroupRef.getList()
        }
      }
    },
    _tabsChange(index) {
      this.tabsCur = index
      if (this.isLogin) {
        this.getMyHelpSellAxios()
        this.getMySupplyGroupAxios()
      }
    },
    // 我的帮卖--邀请帮卖
    _drawInvite() {
      let canvasData = {}
      canvasData = {
        userAvatar: this.shareInfoData.communityLogo || this.$store.state.userInfo.communityLogo,// 团长头像
        userNickname: this.shareInfoData.communityName || this.$store.state.userInfo.communityName,// 名字
        title: this.shareInfoData.introduce || this.$store.state.userInfo.introduce, // 标题
        type: 1,
        fansMun: Util.playvolume(this.shareInfoData.memberCount || 0),
        fansText: '成员数',
        followGroupMun: this.shareInfoData.dynamicCount || 0,
        followGroupText: '跟团人次',
        btnText: '立即加入',
      }
      this.$refs.helpSellDrawRef.shareFrends(canvasData)
    },
    // 我的帮卖--邀请帮卖--分享卡片生成背景图片成功回调函数
    _drawHSSuccess(res) {
      if (res.code == 200) {
        const nickname = this.shareInfoData.communityName || this.$store.state.userInfo.communityName
        this.shareObject = {
          url: res.url,
          title: `${nickname}邀请你成为TA的帮卖，货源都给你，轻松赚佣金！`
        }
        this.dlShare = true
      }
    },
    // 我的帮卖供货邀请他人帮卖
    returnSharedDataFn (data) {
      console.log(data,'_________我的帮卖供货邀请他人帮卖______________')
      this.inviteOthersShareData = data
    },
    // 我的帮卖--邀请帮卖--分享海报绘制函数
    _drawPoster() {
      const canvasData = {
        bgImgUrl: this.shareInfoData.backgroundUrl || 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/bgImg/user_bg_img.png', // 封面大图片
        page: this.shareInfoData.accountId ? `pagesB/personalCenter/homePage` : "pages/index/index", // 二维码地址
        options: {
          applyForHelp: true,
          shareType: true,
        },
        userAvatar: this.shareInfoData.communityLogo || this.$store.state.userInfo.communityLogo,// 团长头像
        userNickname: this.shareInfoData.communityName || this.$store.state.userInfo.communityName,// 名字
        text1: '邀请你成为我的帮卖', // 文案1
        fansMun: Util.playvolume(this.shareInfoData.memberCount || 0), // 粉丝数
        fansText: '成员数', // 粉丝数
        followGroupMun: this.shareInfoData.dynamicCount || 0, // 跟团人次
        followGroupText: '跟团人次', // 跟团人次
        btnText: '货源都给你，轻松赚佣金！',
        tipsText: '长按识别二维码 立即加入', // 提示文案
      }
      canvasData.page = `pagesB/personalCenter/homePage`
      if (this.shareInfoData.accountId) {
        canvasData.options.accountId = this.shareInfoData.accountId
      } else {
        canvasData.options.accountId = this.$store.state.userInfo.accountId
      }
      this.$refs.childHelpSellPosters.sharePosterFrends(canvasData)
      this.dlShare = false
    },
    // 我的帮卖--邀请帮卖--绘制分享海报成功回调函数
    _drawPSSuccess(res) {
      if (res.code == 200) {
        this.posterObject = res
        this.dlPosterPopup = true
      }
    },
    // 获取分享对象数据
    getShareData() {
      shareApi.getShareInfo({}).then(res => { this.shareInfoData = res.data })
    },
  }
}
</script>

<style lang="scss" scoped>
.ssp-stream {
  .tabsBox {
    margin-right: 246rpx;
  }
  .displayNone{
    display: none !important;
  }
}
</style>
